<template>
  <el-container class="main-container">
    <!-- 左侧导航栏 -->
    <el-aside width="218px" class="dark-sidebar">
      <div class="system-title">
        <h2>教师管理系统</h2>
        <div class="user-info">小游</div>
      </div>
      <el-menu active-text-color="#ffd04b" background-color="#001529" text-color="#fff" :default-active="activeMenu"
        class="nav-menu">
        <el-menu-item index="1">
          <template #title>个人信息管理</template>
        </el-menu-item>
        <el-menu-item index="2">题目管理</el-menu-item>
        <el-menu-item index="3">学生管理</el-menu-item>
        <el-menu-item index="4">试卷管理</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容区 -->
    <el-main class="content-area">
      <!-- 功能导航 -->
      <div class="function-nav">
        <el-button type="text">总体数据查看</el-button>
        <el-button type="text" class="active">详细数据查看</el-button>
      </div>

      <!-- 搜索栏 -->
      <el-form :inline="true" class="search-form">
        <el-form-item label="课程">
          <el-input placeholder="请输入课程" style="width: 120px" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input placeholder="请输入班级" style="width: 120px" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" style="width: 120px" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
      </el-form>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" plain>批量导入</el-button>
        <el-button>手动生成试卷</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table :data="tableData" border style="width: 100%" class="data-table">
        <el-table-column prop="studentId" label="学号" width="120" />
        <el-table-column prop="course" label="课程" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="className" label="班级" />
        <el-table-column prop="gender" label="性别" width="80" />
        <el-table-column prop="major" label="专业" />
        <el-table-column prop="total" label="做题总数" />
        <el-table-column prop="accuracy" label="正确率">
          <template #default="{ row }">
            {{ row.accuracy }}%
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="100" class="pagination" />
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'

// 模拟数据
const tableData = ref([
  {
    studentId: '2021001',
    course: '计算机基础',
    name: '张三',
    className: '计科1班',
    gender: '男',
    major: '计算机科学',
    total: 45,
    accuracy: 85
  },
  // 更多模拟数据...
])

const activeMenu = ref('3')
</script>

<style lang="scss" scoped>
.main-container {
  height: 100vh;
  font-family: 'Microsoft YaHei', sans-serif;

  .dark-sidebar {
    background-color: #001529;

    .system-title {
      color: white;
      padding: 18px;

      h2 {
        font-size: 18px;
        margin-bottom: 11px;
      }

      .user-info {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .nav-menu {
      border-right: none;
    }
  }

  .content-area {
    background: #f0f2f5;
    padding: 20px;

    .function-nav {
      margin-bottom: 20px;

      .el-button {
        margin-right: 20px;
        font-size: 16px;

        &.active {
          color: #3333cc;
          border-bottom: 2px solid #3333cc;
        }
      }
    }

    .search-form {
      background: white;
      padding: 15px;
      border-radius: 7px;
      margin-bottom: 20px;
    }

    .action-buttons {
      margin-bottom: 20px;

      .el-button {
        margin-right: 10px;
      }
    }

    .data-table {
      border-radius: 7px;
      overflow: hidden;
    }

    .pagination {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>